<template>
<div style="height: 100vw; width: 100%; overflow: hidden;
.background-image {
  width: 100%;
  height: 100vh; /* 高度为视口高度的100%，确保覆盖整个屏幕 */
  background-image: url('/imgs/login/bg.png');
  background-size: cover; /* 使背景图片充满整个背景 */
  background-position: center; /* 将背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
}">
<el-container style="padding: 30px;">
  <el-header>
    <el-row >
      <el-col :span="1">
        <img src="/imgs/login/auto.png" style="height: 50px;width: 100%">
      </el-col>
      <el-col :span="1">
        <img src="/imgs/login/verticalLine.png" style="height: 50px;width: 100%">
      </el-col>
      <el-col :span="19">
        <span style="color:black;font-weight: bold;font-size: 30px;">居家养老服务平台</span>
      </el-col>
    </el-row>
  </el-header>
    <el-main>
      <el-row>
        <el-col >
          <!--  <el-card style="margin-top: 80px"> 让卡片整体上移 80px      -->
          <el-card style="margin: 80px 500px;   background-color: rgba(255, 255, 255, 0.3); /* 半透明背景色 */
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px); /* 背景模糊效果">
            <h3 style="text-align: center">用户登录</h3>
            <!--            label-position="top"  将label标签上移到输入框上方-->
            <el-form label-position="top">
              <el-form-item label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item >
                <el-button  @click="login" type="primary" style="width: 100%">登录</el-button>
              </el-form-item>
            </el-form>
            <div style="text-align: center;color: #666;font-size: 14px;padding: 10px 0;">
              (体验账号:tom 密码：123456)
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

</el-container>
</div>
</template>
<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
// 定义一个对象,用来收集用户输入的数据
const user=ref({
  username:'',
  password:''
})
const login = () => {
  console.log(user.value)
  //1.给后端发送登录请求(post)---axios要安装 -> npm install axios ,并且导入.
  //('http://localhost:8080/v1/user/login'是后端的端口
  // user.value 前端页面的数据)
  axios.post(BASE_URL+'/v1/user/login',user.value)
      // then 回调---是后端返回的响应
      .then((response)=>{
        //2.发送请求后,服务器处理完毕会给客户端一个响应结果,前端需要在回调函数中处理这个响应结果
        //response是响应对象,我们可以从响应对象response的data中得到后端服务器的响应数据
    //console.log(response);
    console.log(response.data);//后端返回的JsonResult
    console.log(response.data.data);//后一个data是JsonResult中的data,这里就是userVO
        //3.拿到后端返回的响应数据,判断是否登录成功
        if(response.data.code==2000){
          //4.登录成功后,跳转到HomeView页面,再重新定向到用户列表页
          ElMessage.success("登录成功");
          //6.登录成功后,将userVO存入localStorage中
          /*localStorage只能存储*字符串类型*的键值对!!!,
          用这个将登录正确的用户用键值对的方式存储,方便复用,
          后面在main.js中定义了一个全局方法*/
          //JSON.stringify()将对象转化为字符串,这里是将userVO转换为字符串然后存储到user中
          localStorage.setItem('user',JSON.stringify(response.data.data))
          // 跳转到首页,在router包中的index.js中利用redirect:'/user',重新定向到/user
          router.push('/');
        }else {
          ElMessage.error(response.data.msg);
          //5.登录失败,清空用户输入框
          user.value={username: '',password: ''};
        }

  })
}
</script>


<style scoped>

</style>